<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* util */
.line {
  margin: 20px 0;
  border-bottom: 1px solid #ddd;
}

.f-r {
  float: right;
}

.vh-c,
.v-c,
.h-c,
.fc {
  display: flex;
}

.fc {
  flex-direction: column;
}

.vh-c {
  justify-content: center;
  align-items: center;
}

.h-c {
  justify-content: center;
}

.v-c {
  align-items: center;
}

@media screen and (min-width: 625px) {
  body {
    background: #f5f5f5;
  }
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: black;
  text-decoration: none;
}

.van-icon {
  display: block;
}

.navbar-com {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  height: 50PX;
  background: #fff;
  box-shadow: 0 1PX 4PX rgba(0, 0, 0, 0.05);
}

#app {
  width: 100%;
  height: 100vh;
  max-width: 650PX;
  margin: 0PX auto;
  background: #fff;
  padding-top: 50PX;
  overflow-y: auto;
  box-sizing: border-box;
}

html,
body {
  overflow: hidden;
}
</style>
